<template>
  <view class="history">
    <view class="history-head">
      <view>历史记录</view>
      <!-- 清空历史记录按钮 -->
      <view class="iconfont iconlajitong"
            @click="$emit('clear-click')">
      </view>
    </view>

    <!-- 历史记录主体 -->
    <view class="history-body">
      <view class="tag"
            v-for="(item, index) in data"
            :key="index"
            @click="$emit('history-item-click', item)">
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Array,
        default: () => []
      }
    }
  }
</script>

<style lang="scss"
       scoped>
  .history {
    margin: 30rpx;
    font-size: 28rpx;

    .history-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 36rpx;
    }

    .history-body {
      display: flex;
      flex-wrap: wrap;

      .tag {
        font-size: 24rpx;
        padding: 14rpx 28rpx;
        background-color: #f7f7f7;
        border-radius: 34rpx;
        margin-bottom: 20rpx;
        margin-right: 30rpx;
      }
    }
  }
</style>
